<template>
  <a-modal 
    :visible="visible"
    :title="title"
    okText="确定" 
    cancelText="取消"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    @cancel="closeModal()"
    @ok="handleSubmit"
    width="900px">
    <header>
      <div>
        <a-space>
          <div class="row">昵称：<a-input v-model="nickName" :maxLength="20" allowClear style="width:200px;" placeholder="请输入昵称名称"/></div>
          <div class="row">手机号：<a-input v-model="phoneNumber" :maxLength="11" allowClear style="width:200px;" placeholder="请输入手机号"/></div>
        </a-space>
      </div>
      <div class="top15">
        <a-space>
          <a-button type="primary" @click="handleSearch">搜索</a-button>
          <a-button @click="handleReset">重置</a-button>
        </a-space>
      </div>
    </header>
    <a-table 
      class="top15"
      :loading="loading"
      :pagination="pagination"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: handleSelectChange }"
      :columns="columns" 
      :data-source="tableData"
      :rowKey="record=>record.customerId"
      @change="handleChange">
    </a-table>
  </a-modal>
</template>

<script>
export default {
  components:{
    
  },
  props: {
    visible:{
      type:Boolean,
      default:false,
    },
    selectedKeys:{
      type:Array,
      default(){
        return [];
      }
    }
  },
  computed:{
    title(){
      return '客户列表';
    }
  },
  data () {
    return {
      selectedRowKeys:[],
      pagination:{
        showQuickJumper: true,
        total: 0,
        current: 1,
        pageSize: 10,
        showTotal: (total) => `共${ total }条`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100', '200']
      },
      columns:[
          {
            title:'用户ID',
            dataIndex:'customerId',
            key:'customerId',
          },
          {
            title:'头像',
            dataIndex:'avatar',
            key:'avatar',
            customRender:(text)=>{
              return <table-img src={text} />;
            }
          },
          {
              title:'客户姓名',
              dataIndex:'customerName',
              key:'customerName',
          },{
              title:'客户昵称',
              dataIndex:'nickName',
              key:'nickName',
          },{
              title:'手机号',
              dataIndex:'phoneNumber',
              key:'phoneNumber',
          },{
              title:'会员等级',
              dataIndex:'gradeName',
              key:'gradeName',
              // customRender:(text)=>{
              //   if(text==0){
              //     return '普通会员';
              //   }
              //   return '';
              // }
          },
      ],
      tableData:[],
      nickName:'',
      phoneNumber:'',
      loading:false,
    }
  },
  watch: {
    visible(newVal){
      if(newVal){
        this.handleReset();
        console.log('this.selectedKeys',this.selectedKeys);
        this.selectedRowKeys=this.selectedKeys;
       this.getListData();
      }
    }
  },
  created(){
    
  },
  mounted () {
  },
  methods: {
    handleSearch(){
      this.getListData();
    },
    handleReset(){
      this.nickName='';
      this.phoneNumber='';
    },
    closeModal (freshTable) {
      this.$emit('cancel', freshTable)
    },
    handleChange(pagination){
      console.log(pagination);
      this.pagination.current=pagination.current;
      this.getListData();
    },
    async getListData(){
      this.loading=true;
      let params={
        current:this.pagination.current,
        size:this.pagination.pageSize,
      };
      if(this.nickName){
        params.nickName=this.nickName;
      }
      if(this.phoneNumber){
        params.phoneNumber=this.phoneNumber;
      }
      let res=await this.$get('/shop/customer/filter',params);
      if(res && res.returnCode=='1000'){
        this.tableData=res.dataInfo.records || [];
        this.pagination.current=res.dataInfo.current || 1;
        this.pagination.total=res.dataInfo.total || 0;
      }
      this.loading=false;
    },
    handleSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    handleSubmit(){
      console.log('this.selectedRowKeys',this.selectedRowKeys);
      this.$emit('submit',this.selectedRowKeys);
    }
  }
}
</script>

<style lang="less" scoped>
header{
  background: #f5f5f5;
  padding: 24px 32px;
  border-radius: 4px;
}
.top15{
  margin-top:15px;
}
</style>
